<template>
  <div>
    <div class="layout">
      <!-- 面包屑导航 -->
      <!-- <div class="service_bread">
        当前位置：
        <el-breadcrumb
          style="display: inline-block; padding-top: 15px"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item :to="{ path: '/' }">首页 </el-breadcrumb-item>
          <el-breadcrumb-item>园区服务</el-breadcrumb-item>
          <el-breadcrumb-item
            ><i style="color: #007fd2">企业考核</i>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
      <!-- 列表 -->
      <div class="info-about">
        <div class="list_box clearfix" v-if="List.length">
          <div
            :class="`content content${index}`"
            v-for="(item, index) in List"
            :key="item.id"
            @mouseenter="enter(index)"
            @mouseleave="leave(index)"
          >
            <div class="item">
              <div class="time">{{ item.createTime.slice(5, 11) }}</div>
              <div class="title hidden1">{{ item.title }}</div>
              <div class="intro hidden2">
                {{ item.content }}
              </div>
            </div>
            <p :class="`border-boot border-boot${index}`"></p>
            <p :class="`border-b border-b${index}`"></p>
          </div>
        </div>
        <!-- 空状态 -->
        <no-data v-else></no-data>
        <el-pagination
          @current-change="getlist"
          :current-page.sync="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          layout=" prev, pager, next"
          :total="total"
          v-show="total > 0"
          style="margin: 30px 0"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [
                  {
          content:
            '测时内容测时内容测时内容测时内容测时内容测时内容',
          coverImg:
            "http://121.37.197.243:8030/adminApi/image/2022328/f111cf40-d94d-4e8a-b305-872da4e2156e.jpg",
          createTime: "2022-03-28 14:33:57",
          description: "",
          id: 841,
          language: "zh",
          nickName: "admin",
          publishUserId: 44,
          sort: 1,
          title: "援多哥人民联盟之家项目",
          type: "1",
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 6,
      },
      total: 0,
      typeInfo:{}
    };
  },
  computed:{
    typeInfo() {
      return this.$store.state.newsType.detailData;
    },
  },
  created() {
    // console.log(this.typeInfo,'banner')
    this.getlist();
  },

  methods: {
    // 鼠标进入
    enter(index) {
      let ele = document.querySelectorAll(".border-boot");
      ele[index].className = "border-boot enter";
    },
    // 鼠标离开
    leave(index) {
      let ele = document.querySelectorAll(".border-boot");
      ele[index].className = "border-boot leave";
    },
    getlist() {
      getList(this.queryParams).then((res) => {
        // console.log(res, "列表");
        this.List = res.data.records;
        this.total = res.data.total;
      });
      getTypeInfo(this.$route.query.id).then(res=>{
        // console.log(res,'類目信息')
        this.typeInfo = res.data
      })
    },
    // 跳转详情页面
    toINfo(id) {
      this.$router.push("/goods/detial?id=" + id);
    },
  },
};
</script>

<style scoped>
.info-about{
  margin-bottom: 50px;
}
.title_box {
  padding-left: 15px;
}
.title_box p {
  height: 37px;
  line-height: 53px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  width: 220px; /* 限定盒子的宽度 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 1; /* 用来限制在一个块元素显示的文本行数*/
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式*/
  overflow: hidden; /*给元素设置溢出隐藏*/
  text-overflow: ellipsis; /*文本溢出显示省略号*/
}
.title_box i {
  display: inline-block;
  width: 50px;
  height: 2px;
  background: #007fd2;
}
.list_item:hover img {
  transform: scale(1.1);
}
.list_item:hover {
  box-shadow: 1px 1px 15px #999;
  cursor: pointer;
}
.banner {
  min-width: 1200px;
  max-height: 330px;
  display: flex;
  margin: 0 auto;
  border: none;
  position: relative;
  z-index: 99;
}
.banner img {
  display: block;
  width: 100%;
}
.service_bread {
  height: 80px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  box-sizing: border-box;
  padding-top: 30px;
}
.service_bread >>> .el-breadcrumb__inner {
  color: #666;
}
.service_bread >>> .el-breadcrumb__inner.is-link {
  font-weight: 400;
}
.service_bread >>> .el-breadcrumb__inner.is-link:hover {
  color: #007fd2;
}
.content {
  float: left;
  width: 280px;
  height: 175px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  padding: 40px 50px;
  margin: 8px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}
.time {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #888888;
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 76px;
  transition: 0.5s;
}
.intro {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 28px;
}
.content > .border-boot {
  width: 0px;
  height: 0px;
  background: #007fd2;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.content > .border-b {
  width: 380px;
  height: 1px;
  background: #ebebeb;
  position: absolute;
  bottom: 0;
  left: 0;
}
.content:hover {
  background: #e5f2fa;
  border: 1px solid #e5f2fa;
}
.content:hover .title {
  color: #007fd2;
}

@keyframes run {
  0% {
    width: 0px;
    height: 1px;
    background: #007fd2;
  }
  100% {
    width: 380px;
    height: 1px;
    background: #007fd2;
  }
}
.enter {
  animation: run 0.5s linear;
  animation-fill-mode: forwards;
}
.leave {
  animation: out 0.5s linear;
  animation-fill-mode: forwards;
}
@keyframes out {
  0% {
    width: 380px;
    height: 1px;
    background: #007fd2;
  }
  100% {
    width: 0px;
    height: 1px;
    background: #007fd2;
  }
}
</style>
